<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"> </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/babel">
        class Mylife extends React.Component {
            /* 初始化数据,state 用,绑定react的方法,
            可以删除,因为继承的时候,默认会写 */
            constructor(props) {
                super(props)
                // this 是静态的
                let successfn = (date) => {
                    // name 从服务器端获取来的了
                    this.state={
                        name:date.uername,
                        age:10
                    }
                }
                // 默认是异步方法
                $.ajax({
                    url:'http://127.0.0.1/react',
                    async:false,
                    data:{name:'zhangsan',age:10},
                    success:successfn,
                    error:function(msg){
                        alert(msg);
                    }
                })
            }

            /* 在挂载阶段执行,只执行一次啊
            由react去自己执行的,官方建议再 cons
             */
             componentWillMount(){
                let successfn = (date) => {
                    // name 从服务器端获取来的了
                    let { name } = this.state
                    name = date.age;
                    this.setState({name})
                    console.log('我只出现一次,setState 不会重新的渲染')
                }
                // 默认是异步方法
                $.ajax({
                    url:'http://127.0.0.1/react',
                    async:false,
                    data:{name:'zhangsan',age:10},
                    success:successfn,
                    error:function(msg){
                        alert(msg);
                    }
                })
            }
            /* render方法之后执行,页面已经生成了真正的html,dom树
            和vue mounted 是一样的,从服务器端获取数据,
            可以开异步的方法,定时器 setInterval,延迟器 setTimeout*/
            componentDidMount(){
                let successfn = (date) => {
                    // name 从服务器端获取来的了
                    let { name } = this.state
                    name = date.uername;
                    this.setState({name})
                    console.log('执行一次,从服务器获取数据,发送数据')
                }
                // 默认是异步方法
                $.ajax({
                    url:'http://127.0.0.1/react',
                    // async:false,
                    data:{name:'zhangsan',age:10},
                    success:successfn,
                    error:function(msg){
                        alert(msg);
                    }
                })
            }


            render() {
                // 用的es6的解构 const age = this.state.age
                const {age, name } = this.state                
                return (
                    <div> 我是主组件--&gt; {age}---{name}
                        <Mybtn />
                    </div>
                    
                )
            }
        }
        class Mybtn extends React.Component {
            constructor(props) {
                super(props)
            }
            

            render() {
                return (
                    <div>我是子组件===&gt; </div>
                )
            }
        }
        ReactDOM.render(<Mylife />, document.getElementById('app'))

    </script>

</body>

</html>